<template>
  <view style="padding: 20rpx;">
    <view class="" style="margin-bottom: 20rpx;padding: 20rpx;background: #fff;display: flex;flex-direction: column;"
      v-for="(item,index) in noticeList" :key="index" @click="noticeClick(item,index)">
      <uni-badge v-if="item.isRead != 1" style="left: 15rpx;bottom: 15rpx;" :is-dot="true" text="1" absolute="rightTop"
        size="small">
      </uni-badge>
      <view class="" style="display: flex;flex-direction: column;">
        <view class="display-default" style="justify-content: space-between;">
          <text style="font-size: 14px;">{{item.title}}</text>
          <text style="font-size: 11px;color: #bbb;">{{item.sendDateInterval}}</text>
        </view>
        <text style="color: #6d6d6d;margin: 20rpx 0;font-size: 12px;">{{item.content}}</text>
      </view>
      <view class="display-default msg_detail"
        style="padding-top: 20rpx;border-top: 1px solid #f0f0f0;justify-content: space-between;">
        <text style="font-size: 11px;color: #6d6d6d;">点击查看</text>
        <view class=""></view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        noticeList: [],
        token: ''
      };
    },
    async onLoad() {
      this.token = await uni.getStorageSync('token')

      await this.getAllNoticeByUid()
    },
    methods: {
      /**
       * @description ：根据学生uid查询用户需要接收的所有通知-有联合索引[noticeRelationId和uid组成联合索引]
       * 1. not in查询，根据学生id查询t_notice_relation表里是否有包含对应noticeId的通知，包含且已经删除则不予发送
       * 2. 如果用户注册时间大于通知时间则不予发送
       * 3. 如果t_notice_relation表里的通知记录已被删除则不予发送
       */
      getAllNoticeByUid() {
        this.$http.notice.getAllNoticeInfoByUid(this.token).then(res => {
          console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            })
            return
          }

          this.noticeList = res.data
        }).catch(err => {
          console.log("res: " + JSON.stringify(res));
        })
      },

      /**
       * @description ：当用户点击阅读消息之后，直接根据用户接收的通知noticeId和学生uid添加对应消息记录到t_notice_relation表中，默认设置为已阅读状态[1]
       * @param noticeId t_notice表主键id
       */
      addNoticeRelation(noticeId) {
        this.$http.notice.addNoticeRelationInfo(this.token, noticeId).then(res => {
          console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            })
            return
          }
        }).catch(err => {
          console.log("res: " + JSON.stringify(res));
        })
      },

      /**
       * @description 消息点击
       * @param {object} item 消息数据  
       */
      noticeClick(item, index) {
        console.log("item: " + JSON.stringify(item));

        if (item.toModule == '通知公告') {
          // 跳转到详情页
          uni.navigateTo({
            url: `/pages/pressDetail/pressDetail?pressId=${item.targetId}`,
            success: res => {
              // 看用户是否为已阅读还是未阅读状态
              if (item.isRead != 1) {
                // 用户已点击，设置为已阅读状态
                this.addNoticeRelation(item.noticeId)
                // 取消红点角标
                this.noticeList[index].isRead = 1

                // 设置两个返回消息体，一个是首页的，一个是个人中心
                uni.setStorageSync('isUserMessageCenterToIndex', true)
                uni.setStorageSync('isUserMessageCenterToMyCenter', true)
              }
            },
          })
        }
      },
    }
  }
</script>

<style lang="scss">
  .msg_detail::after {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 6px;
    width: 6px;
    border-width: 1.5px 1.5px 0 0;
    border-color: #6d6d6d;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    border-radius: 1px;
  }
</style>
